import React from "react"
import { Icon, Select } from "antd";
import { messages } from "share/common";
import Condition from "components/condition";
import 'styles/components/chooser.scss';

const { If } = Condition;
const { PropTypes } = React;


class SelectSupporter extends React.Component {

  constructor(props) {
    super(props);
  }

  onFocus = () => {
    this.refs.chooserBlur.focus();
    this.props.onFocus()
  };

  render() {
    const { value, placeholder, showClear, onClear } = this.props;
    const { onFocus } = this;
    return (
      <div className='chooser'>
        <Select
          style={{ width: '100%' }}
          value={value}
          placeholder={placeholder}
          onFocus={onFocus}
          dropdownStyle={{ display: 'none' }}
        />
        <If value={value}>
          <div className={`fake-value-list`} onClick={onFocus}>
            {value}
          </div>
        </If>
        {/*如果禁用了，就不要后面的清除icon*/}
        <Icon className="ant-select-selection__clear" type="close-circle" onClick={onClear}
              style={!value ? { opacity: 0 } : {}}/>
        <div>
          <input
            ref="chooserBlur"
            style={{ opacity: 0, position: 'fixed', width: 0, height: 0, zIndex: -1 }}
          />
        </div>
      </div>
    )
  }

  static propTypes = {
    value: PropTypes.any,
    placeholder: PropTypes.string,
    onFocus: PropTypes.func,
    onClear: PropTypes.func,
  }

  static defaultProps = {
    placeholder: messages('common.select')/*请选择*/,/*请选择*/
    onFocus: () => {
    },
    onClear: () => {
    }
  }
}

export default SelectSupporter
